{% extends "my/layout.html" %}

{% block my %}
<div class="container">
    <h3>我的订单</h3>
    <hr>


    {% if orders %}
    <p>您的账号余额是{{g.user.balance/100}}元</p>
    <p>共有 {{orders|length }} 个订单</p>
    <div class="row">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>金额(元)</th>
                <th>订单创建时间</th>
                <th>状态</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for order in orders %}
            <tr>
                <td>{{loop.index}}</td>
                <td>{{order.order_num}}</td>
                <td>{{order.price/100}}</td>
                <td>{{order.gmt_created}}</td>
                <td>{{order.status | order_status}}</td>
                <td>{{order.count}}个服务,总价{{order.price/100}}元</td>
                {% if order.status == 0 %}
                <td>
                    <a href="javascript:void(0);" data-value="{{order.order_num}}"
                       class="btn btn-success btn-pay-order">用余额支付</a>
                    <p></p>
                    <a href="javascript:void(0);" data-value="{{order.order_num}}"
                       class="btn btn-danger btn-cancel-order">取消订单</a>
                </td>
                {% else %}
                <td></td>
                {% endif%}
                <!--<th data-value="{{order.order_num}}" class="operator"><span class="btn btn-success">使用余额支付</span> <span class="btn btn-success">使用支付宝支付</span></th>-->
            </tr>

            {% endfor %}
            </tbody>
        </table>
    </div>

    {% else %}
    <div class="col-sx-3">
        <span>没有订单,<a href="{{url_for('over.handlers.my.cart.index')}}"> 买一个</a></span>
    </div>
    {% endif%}


</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
    $(function () {
        var cancelOrder = function (orderNum) {
            $.post("{{url_for('over.handlers.my.order.cancel')}}", {orderNum: orderNum}).done(function (data) {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.error);
                }
            });
        };

        var payOrder = function (orderNum) {
            $.post('{{url_for("over.handlers.my.order.pay")}}', {orderNum: orderNum}).done(function (data) {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.error);
                }
            });
        };


        $(".btn-cancel-order").click(function () {
            var $this = $(this);
            var orderNum = $this.attr("data-value");

            cancelOrder(orderNum);
        })

        $(".btn-pay-order").click(function () {
            var $this = $(this);
            var orderNum = $this.attr("data-value");

            payOrder(orderNum);
        })
    })

</script>
{% endblock %}